<template>
  <div class="content-section">
    <h3>Order status</h3>
    <h3 class="description">
      See your order even if you are not a registered user. Enter the order number, email, and the billing address ZIP code.
    </h3>
    <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 24 }"
        autocomplete="off"
        @finish="onFinish"
    >
      <a-form-item name="order_no" :rules="rules.order_no">
        <div  class="form-group">
          <a-input  v-model:value="formState.order_no" class="custom-input" placeholder="Order number" allowClear />
        </div>
      </a-form-item>
      <a-form-item name="email" :rules="rules.email">
        <div  class="form-group">
          <a-input type="email" v-model:value="formState.email" class="custom-input" placeholder="Order email" allowClear />
        </div>
      </a-form-item>
      <a-form-item name="password">
        <div  class="form-group">
          <a-input type="password" v-model:value="formState.zip_code" class="custom-input" placeholder="Billing ZIP code" allowClear />
        </div>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 24 }">
        <a-button class="signIn" type="primary" html-type="submit" :loading="loading">Check status</a-button>
      </a-form-item>
    </a-form>
  </div>
   <!-- 订单详情抽屉 -->
   <OrderDetailDrawer
        v-model:open="drawerVisible"
        :order="currentOrder"
        @update:visible="closeDrawer"
    />
   <!-- 全屏加载中遮罩 -->
   <!-- <a-spin :spinning="loading" tip="Loading..." size="large" class="global-spin">
     <div class="spin-content"></div>
   </a-spin> -->
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import type { Rule } from 'ant-design-vue/es/form'
import {getGuest,getOrderDetail} from "@/api/user";
import OrderDetailDrawer from '@/components/OrderDetailDrawer.vue';
import { message } from 'ant-design-vue';

// 加载状态
const loading = ref(false);
// 抽屉显示状态
const drawerVisible = ref(false);
// 当前查看的订单
const currentOrder = ref(null);
interface FormState {
  order_no: string;
  email: string;
  zip_code: string;
}
const formState = reactive<FormState>({
  order_no: "",
  email: "",
  zip_code: "",
});
const rules: Record<string, Rule[]> = {
  email: [
    { required: true, message: "Please enter your email address" },
    { type: "email", message: "Please enter the correct email format" },
  ],
  // zip_code: [
  //   { required: true, message: "Please enter your billing ZIP code" },
  // ],
  order_no: [
    { required: true, message: "Please enter your order number" },
  ],
};
const onFinish = async (values: any) => {
  console.log(values);
  loading.value = true;
  try {
    const res = await getGuest(formState);
    if (res.code === 200) {
      console.log(res.data);
      currentOrder.value = res.data;
      drawerVisible.value = true;
      //清空表单
      formState.order_no = "";
      formState.email = "";
      formState.zip_code = "";

      // message.success('Login successful');
      // message.success('Login successful');
    } else {
      message.error(res.message || 'Failed to get order details');
    }
  } catch (error) {
    console.error('Form submission error:', error);
    message.error('Failed to get order details, please try again later');
  } finally {
    loading.value = false;
  }
};
// 关闭面板
const closeDrawer = (bool: boolean) => {
  drawerVisible.value = bool;
};
// 显示订单详情
// const showOrderDetail = async (order) => {
//   try {
//     const res = await getOrderDetail(order.id);
//     if (res.code === 200) {
//       currentOrder.value = res.result;
//       drawerVisible.value = true;
//     } else {
//       message.error(res.message || 'Failed to get order details');
//     }
//   } catch (error) {
//     console.error('Failed to get order details:', error);
//     message.error('Failed to get order details, please try again later');
//   }
// };
</script>

<style scoped>
.content-section {
  animation: fadeIn 0.3s ease;
}

.description {
  /* color: #666; */
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 20px;
}




.custom-input {
  width: 370px; 
  height: 40px;
  border-radius: 0px; 
  border-top: none; 
  border-left: none; 
  border-right: none; 
  border-bottom: 1px solid #71767f;
  transition: border-color 0.3s ease;
}

/* 覆盖ant-design默认的focus样式，但保留下边框 */
:deep(.ant-input:focus),
:deep(.ant-input-focused),
:deep(.ant-input-affix-wrapper:focus),
:deep(.ant-input-affix-wrapper-focused) {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
   /* 焦点状态时下边框颜色可以稍深 */
  box-shadow: none !important;
  outline: none;
}

/* 覆盖hover状态的样式 */
:deep(.ant-input:hover),
:deep(.ant-input-affix-wrapper:hover) {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  /* border-bottom: 1px solid #71767f !important; */
  box-shadow: none !important;
}

a-input {
  width: 100%;
  padding: 12px;
  border: none;
  border-bottom: 1px solid #71767f;
  /* border-radius: 4px; */
  font-size: 14px;
}

.signIn {
  width: 100%;
  padding: 20px;
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  cursor: pointer !important;
  pointer-events: auto !important;
  background-color: #71767f; /* 使用Ant Design的主色 */
}

/* 覆盖Ant Design组件内部样式 */
:deep(.signIn) {
  pointer-events: auto !important;
}

:deep(.ant-btn) {
  pointer-events: auto !important;
}

.signIn:hover {
  background-color: #000;
}
.forgot-password {
  display: flex;
  align-items: center;
  justify-content: left;
}
.forgot-password-text {
  font-size: 14px;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 10px;
}

/* 全屏加载样式 */
.global-spin {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 1000;
}

.spin-content {
  min-height: 100px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 